<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>响应式表单</title>
        <style>
            *{
                box-sizing: border-box;
            }
            input[type=text],select,textarea{
                width: 100%;
                padding: 12px;
                border: 1px solid #ccc;
                border-radius: 4px;
                resize: vertical;
            }
            label{
               padding: 12px 12px 12px 0;
                display: inline-block;
            }
            input[type=submit]{
                background-color: #4caf50;
                color: white;
                padding: 12px 20px;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                float: right;
            }
            input[type=submit]:hover{
                background-color: #45a049;
            }
            .container{
                border-radius: 5px;
                background-color: #f2f2f2;
                padding: 20px;
            }
            .col-25{
                float: left;
                width: 25%;
                margin-top: 6px;
            }
            .col-75{
                float: left;
                width: 75%;
                margin-top: 6px;
            }
            /* 清除浮动 */
            .row::after{
                content: "";
                display: table;
                clear: both;
            }
            /*响应式布局layout在屏幕宽度小于600px,设置为上下堆叠元素  */
            @media screen and (max-width:600px) {
                .col-25,.col-75,input[type=submit]{
                    width: 100%;
                    margin-top: 0;
                }
            }
        </style>
    </head>
    <body>
        <h2>响应式表单</h2>
        <p>响应式表带可以根据浏览器窗口的大小重新布局各个元素，我们可以通过重置浏览器窗口大小来查看效果：</p>
        <div class="container">
            <form action="/">
                <div class="row">
                    <div class="col-25">
                        <label for="fname">FirstName:</label>
                    </div>
                    <div class="col-75">
                        <input type="text" id="fname" name="firstName" placeholder="Your name...">
                    </div>
                </div>
                <div class="row">
                    <div class="col-25">
                        <label for="lname">LastName:</label>
                    </div>
                    <div class="col-75">
                        <input type="text" id="lname" name="lastName" placeholder="Your last name...">
                    </div>
                </div>
                <div class="row">
                    <div class="col-25">
                        <label for="country">Country</label>
                    </div>
                    <div class="col-75">
                        <select name="country" id="country">
                            <option value="australia">Australia</option>
                            <option value="canada">Canada</option>
                            <option value="usa">USA</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-25">
                        <label for="subject">Subject</label>
                    </div>
                    <div class="col-75">
                        <textarea name="subject" id="subject" placeholder="Write something.." style="height: 200px;"></textarea>
                    </div>
                </div>
                <div class="row">
                    <input type="submit" value="Submit">
                </div>
            </form>
        </div>
    </body>
</html>